Directive Info

This directive executes at priority level 0.

Usage

<input type="number"
       ng-model=""
       [name=""]
       [min=""]
       [max=""]
       [required=""]
       [ng-required=""]
       [ng-minlength=""]
       [ng-maxlength=""]
       [ng-pattern=""]
       [ng-change=""]>

Arguments

Param	Type	Details
ngModel	string	Assignable angular expression to data-bind to.
name (optional)	string	Property name of the form under which the control is published.
min (optional)	string	Sets the `min` validation error key if the value entered is less than `min`.
max (optional)	string	Sets the `max` validation error key if the value entered is greater than `max`.
required (optional)	string	Sets `required` validation error key if the value is not entered.
ngRequired (optional)	string	Adds `required` attribute and `required` validation constraint to the element when the ngRequired expression evaluates to true. Use `ngRequired` instead of `required` when you want to data-bind to the `required` attribute.
ngMinlength (optional)	number	Sets `minlength` validation error key if the value is shorter than minlength.
ngMaxlength (optional)	number	Sets `maxlength` validation error key if the value is longer than maxlength.
ngPattern (optional)	string	Sets `pattern` validation error key if the value does not match the RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for patterns defined as scope expressions.
ngChange (optional)	string	Angular expression to be executed when input changes due to user interaction with the input element.

Example

Edit in Plunker

<script>
  function Ctrl($scope) {
    $scope.value = 12;
  }
</script>
<form name="myForm" ng-controller="Ctrl">
  Number: <input type="number" name="input" ng-model="value"
                 min="0" max="99" required>
  <span class="error" ng-show="myForm.input.$error.required">
    Required!</span>
  <span class="error" ng-show="myForm.input.$error.number">
    Not valid number!</span>
  <tt>value = {{value}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
 </form>

var value = element(by.binding('value'));
var valid = element(by.binding('myForm.input.$valid'));
var input = element(by.model('value'));

it('should initialize to model', function() {
  expect(value.getText()).toContain('12');
  expect(valid.getText()).toContain('true');
});

it('should be invalid if empty', function() {
  input.clear();
  input.sendKeys('');
  expect(value.getText()).toEqual('value =');
  expect(valid.getText()).toContain('false');
});

it('should be invalid if over max', function() {
  input.clear();
  input.sendKeys('123');
  expect(value.getText()).toEqual('value =');
  expect(valid.getText()).toContain('false');
});